<template>
  <div class="tranScoreMain">
    <div v-if='showData'>
      <div class="tranScoreTop">
        <p class="transName">{{ExamResult.paper_name}}</p>
        <p class="tranScore">{{totalScore}}分</p>
      </div>
      <div class="tranDetail">
        <div class="tranDetailTitle">
          <img src="../../../static/images/cateGory.png"
               alt="">
          <span>考试详情</span>
        </div>
        <div class="tranDetailTotal">
          总分：
          <span>100</span>分 合格分数线：
          <span>60</span>分 答卷耗时：
          <span>{{ExamResult.long_time}}</span>秒
        </div>
        <div class="tranTable">
          <div class="trabTableTop">
            <p>题型</p>
            <p>总题数</p>
            <p>答对题数</p>
            <p>总分</p>
            <p>得分</p>
          </div>
          <div class="trabTableList">
            <p>单选题</p>
            <p>{{examPaper.totalNum}}</p>
            <p>{{ExamResult.correct_num}}</p>
            <p>{{100}}</p>
            <p>{{totalScore}}</p>
          </div>
          <div class="trabTableBottom">
            本次考试共{{examPaper.totalNum}}道题，总分100分，您做对{{ExamResult.correct_num}}道题，得到
            <span>{{totalScore}}</span> 分
          </div>
        </div>
        <div class="tranBtn">
          <span @click.stop="checkReason">查看答案和解析</span>
          <span class="next"
                @click.stop="navToRecord">进入我的考试记录</span>
        </div>
      </div>
    </div>
    <div v-if="loading"
         class="loading">
      <img :src="loadingpng"
           alt="">
    </div>

  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      loading: true,
      loadingpng: './../../static/images/loading2.png',
      showData: false
    }
  },
  computed: {
    ...mapState({
      examPaper: state => state.examPaper,
      ExamResult: state => state.ExamResult
    }),
    totalScore () {
      // return parseInt(100 / this.examPaper.totalNum * this.examPaper.rightTotal)
      return parseInt(this.ExamResult.grade)
    }
  },
  methods: {
    ...mapMutations(['setrandomRecord']),
    // 考试记录
    navToRecord () {
      wx.navigateTo({
        url: '../examRecord/main?type=' + this.examPaper.examType
      })
    },
    // 试题解析
    checkReason () {
      wx.navigateTo({
        url: '../examAnalyse/main?type=' + this.$mp.query.type
      })
    }
  },
  mounted () {
    console.log(this.$mp.query.type)
    console.log(this.examPaper)
    console.log(this.ExamResult)
    if (this.ExamResult) {
      this.loading = false
      this.showData = true
    }
  }
}
</script>
<style lang="stylus">
.tranScoreMain {
  width: 100%;
  height: 100%;
}

.loading {
  position: relative;
  height: 100%;
  width: 100%;

  img {
    display: block;
    width: 237rpx;
    height: 335rpx;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
}

.tranScoreMain {
  height: 100%;
  background: #f7f7f7;
}

.tranScoreTop {
  height: 360rpx;
  background: white;
  text-align: center;
}

.transName {
  font-size: 32rpx;
  color: #666;
  line-height: 88rpx;
}

.tranScore {
  font-size: 58rpx;
  height: 240rpx;
  line-height: 240rpx;
  color: #ef5151;
  font-weight: bold;
}

.tranDetail {
  margin-top: 20rpx;
  background: white;
  padding: 0 32rpx;
  padding-bottom: 38rpx;
}

.tranDetailTitle {
  height: 88rpx;
  line-height: 88rpx;
  vertical-align: middle;
}

.tranDetailTitle img {
  display: inline-block;
  width: 48rpx;
  height: 50rpx;
  vertical-align: middle;
}

.tranDetailTitle span {
  font-size: 32rpx;
  color: #333333;
  margin-left: 25rpx;
}

.tranDetailTotal {
  font-size: 30rpx;
  color: #333333;
}

.tranDetailTotal span {
  color: #00cc76;
}

.tranTable {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid #e6e6e6;
  font-size: 0;
  margin-top: 15rpx;
  margin-bottom: 40rpx;
}

.trabTableTop, .trabTableList {
  background: #d0f5e6;
  height: 66rpx;
  line-height: 66rpx;
}

.trabTableList, .trabTableBottom {
  background: #fff;
  font-size: 28rpx;
}

.trabTableBottom {
  height: auto;
  padding: 10rpx 20rpx;
  background: #f7f7f7;
  text-align: justify;
}

.trabTableTop p, .trabTableList p {
  display: inline-block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 20%;
  height: 100%;
  font-size: 28rpx;
  color: #333333;
  text-align: center;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

.trabTableTop p {
  color: #333;
}

.trabTableList p {
  color: #666;
}

.tranBtn {
  text-align: center;
  margin-bottom: 38rpx;
}

.tranBtn span {
  display: inline-block;
  width: 290rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  border-radius: 10rpx;
  -webkit-border-radius: 10rpx;
  font-size: 28rpx;
  color: #fff;
  background: #00cc76;
}

.tranBtn .next {
  margin-left: 40rpx;
}
</style>
